<template>
    <div class="dndList">
        <div class="dndList-list">
            <h3>常用</h3>
            <draggable
                :list="list1"
                :options="{group:'article', disabled: disabled}"
                class="dragArea11"
                style="height: 100px"
                @start="start22"
                @end="end22">
                <div v-for="(element, index) in list1" :key="element.id" class="list-complete-item">
                    <div class="list-complete-item-handle">{{ element.name }}</div>
                    <div>
                        <i class="el-icon-delete" @click="handleDel(index, element.id)"/>
                    </div>
                </div>
            </draggable>
        </div>
        <div style="width: 100%; height: 10px; background-color: #bfbfbf"/>
        <div class="dndList-list">
            <h3>所有</h3>
            <draggable
                :list="list2"
                :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
                class="dragArea"
                @end="end">
                <div
                    v-for="element in list2"
                    :key="element.id"
                    :class="{undraggable : element.flag}"
                    class="list-complete-item">
                    <div class="list-complete-item-handle2">
                        {{ element.name }}
                    </div>
                </div>
            </draggable>
        </div>
    </div>
</template>
<script>
    import draggable from 'vuedraggable'

    export default {
        name: 'DndList',
        components: { draggable },
        data() {
            return {
                falgs: 'article',
                disabled: false,
                list1: [],
                list2: [{ id: 1, name: 1 }, { id: 2, name: 2 }, { id: 3, name: 3 },
                        { id: 4, name: 4 }, { id: 5, name: 5 }, { id: 6, name: 6 },
                        { id: 7, name: 7 }, { id: 8, name: 8 }, { id: 9, name: 9 }, { id: 10, name: 10 }
                ]
            }
        },
        computed: {
        },
        watch: {
        },
        methods: {
            end(ev) {
                if (ev.to.className === 'dragArea11') {
                    this.$set(this.list2[ev.oldIndex], 'flag', true)
                }
            },
            start22(event) {
                this.falgs = '222222'
            },
            end22(ev) {
                this.falgs = 'article'
            },
            handleDel(index, id) {
                this.list1.splice(index, 1)
                const q = this.list2.find((value, index, arr) => {
                    return value.id === id
                })
                this.$set(q, 'flag', false)
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .list-complete-item {
    cursor: pointer;
    position: relative;
    font-size: 14px;
    padding: 5px 12px;
    display: inline-block;
    margin-right: 20px;
    width: 50px;
    height: 50px;
    border: 1px solid #bfcbd9;
    transition: all 1s;
  }

  .list-complete-item.sortable-chosen {
    background: #4AB7BD;
  }

  .list-complete-item.sortable-ghost {
    background: #30B08F;
  }
  .undraggable {
    background-color: red;
  }

  .list-complete-enter,
  .list-complete-leave-active {
    opacity: 0;
  }
</style>
